<template>
  <div class="system-role-container layout-padding">
    <div class="system-role-padding layout-padding-auto layout-padding-view">
      <div class="m-header">
        <div class="pro-name"></div>
      </div>

      <div class="table_content_changes">
        <div
          style="
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
          "
          class="button_poastion"
        >
          <div style="width: 20%">
            <el-input
            clearable
              size="default"
              placeholder="请输入文档名称"
              v-model="proName"
              :suffix-icon="Search"
            />
          </div>

          <div style="display: flex; align-items: center">
            <el-popover placement="bottom-start" :width="700">
              <template #reference>
                <el-button size="small" :icon="Upload" class="dr23"
                  >导入</el-button
                >
              </template>
              <div
                style="
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  padding: 10px;
                "
              >
                <el-upload
                  action="#"
                  :http-request="uploadRequest"
                  :show-file-list="false"
                  style="display: inline-block"
                  class="buttonposition"
                >
                  <el-button
                    size="small"
                    :icon="Upload"
                    type="primary"
                    class="dr23"
                    >导入部室文件</el-button
                  >
                </el-upload>

                <el-upload
                  action="#"
                  :http-request="uploadRequest2"
                  :show-file-list="false"
                  style="display: inline-block"
                  class="buttonposition"
                >
                  <el-button
                    size="small"
                    :icon="Upload"
                    type="success"
                    class="dr23"
                    >导入技术资料</el-button
                  >
                </el-upload>

                <el-upload
                  action="#"
                  :http-request="uploadRequest3"
                  :show-file-list="false"
                  style="display: inline-block"
                  class="buttonposition"
                >
                  <el-button
                    size="small"
                    :icon="Upload"
                    type="danger"
                    class="dr23"
                    >导入党建资料</el-button
                  >
                </el-upload>

                <el-upload
                  action="#"
                  :http-request="uploadRequest4"
                  :show-file-list="false"
                  style="display: inline-block"
                  class="buttonposition"
                >
                  <el-button
                    size="small"
                    :icon="Upload"
                    type="warning"
                    class="dr23"
                    >导入海外资料</el-button
                  >
                </el-upload>

                <el-upload
                  action="#"
                  :http-request="uploadRequest5"
                  :show-file-list="false"
                  style="display: inline-block"
                  class="buttonposition"
                >
                  <el-button
                    size="small"
                    :icon="Upload"
                    type="success"
                    class="dr23"
                    >导入安全设计管理</el-button
                  >
                </el-upload>
              </div>
            </el-popover>

            &nbsp;&nbsp;&nbsp;
            <el-popconfirm @confirm="delAllRules" title="确定要删除吗？">
              <template #reference>
                <el-button size="small" class="delArr" :icon="Delete"
                  >批量删除</el-button
                >
              </template>
            </el-popconfirm>
          </div>
        </div>
        <el-table
          :header-cell-style="{ background: '#fafbfc', color: '#333333' }"
          :data="tableRuleData"
          class="roledata"
          @selection-change="handleSelectionChangeRule"
          :height="activeHeight"
        >
          <el-table-column type="selection" />
          <el-table-column
            type="index"
            width="80"
            label="序号"
            align="center"
          />
          <el-table-column prop="file_name" label="文档名称" sortable>
          </el-table-column>
          <el-table-column
            :filters="[
              { text: '部室文件', value: '部室文件' },
              { text: '技术资料', value: '技术资料' },
              { text: '党建资料', value: '党建资料' },
              { text: '海外资料', value: '海外资料' },
              { text: '安全设计管理', value: '安全设计管理' },
            ]"
            :filter-method="filterHandler"
            prop="file_type"
            label="文档类型"
            width="200"
          >
          </el-table-column>
          <el-table-column
            width="200"
            prop="file_size_inBytes"
            label="文件大小"
            sortable
          >
            <template #default="scope">
              {{  convertFileSize(scope.row.file_size_inBytes)  }} KB
            </template>
          </el-table-column>
          <el-table-column
            label="发布日期"
            prop="create_time"
            width="200px"
            sortable
          >
          </el-table-column>
          <el-table-column width="250" label="操作">
            <template #default="scope">

              <span
                style="color: #1890ff; margin-right: 1em; cursor: pointer"
                size="small"
                @click="viewFile(scope.row)"
                >预览</span
              >
              <span
                style="color: #1890ff; margin-right: 1em; cursor: pointer"
                size="small"
                @click="previewRule(scope.row)"
                >下载</span
              >

              <el-popconfirm
                title="确定要删除吗?"
                @confirm="confirmDeleteRule(scope.$index, scope.row)"
              >
                <template #reference>
                  <span style="color: #189eff; cursor: pointer">删除</span>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <div style="display: none" class="page_pagiation">
          <el-pagination
            v-if="false"
            v-model:current-page="pageNumRule"
            v-model:page-size="pageSizeRule"
            :page-sizes="[10, 30, 50]"
            background
            layout="total, sizes, prev, pager, next"
            :total="totalRule"
            @size-change="handleSizeChangeRule"
            @current-change="handleCurrentChangeRule"
          />
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script setup name="systemRole">
import { defineAsyncComponent, reactive, onMounted, ref, watch } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import {
  Search,
  CirclePlus,
  Upload,
  Download,
  Delete,
} from "@element-plus/icons-vue";
import { useProjectStore } from "../../stores/project";
import { storeToRefs } from "pinia";
import {
  DeleteUnit,
  
  AddUnit,
  GetUnits,
 
  impMarjor,
 

  getOptionLeader,
  getOptionTeam,
  
  GetProjectUnifiedRegulationFiles,
  UploadDepartmentFiles,
  DownloadDepartmentFile,
  DeleteDepartmentFile,
  AddProjectNotice,
  ModifyProjectNoticeState,
  GetAllProjectNotices,
  GetDepartmentFiles,
} from "../../api/projectManage/projectList";
import checkFile from '/@/utils/checkFile';
let store = useProjectStore();

let { projectInfo } = storeToRefs(store);

let proName = ref("");

// 过滤几种资料的类型
let filterHandler = (value, row, column) => {
  const property = column["property"];
  return row[property] === value;
};

// 触发文件查看操作
let viewFile = (row) => {
  checkFile('',row)
}


// 搜索名称
watch(proName, async () => {
  if (proName.value) {
    let res = await GetDepartmentFiles();
    let data = JSON.parse(JSON.stringify(res));
    tableRuleData.value = data.filter((v) =>
      v.file_name.includes(proName.value)
    );
  } else {
    gettableRuleDataData();
  }
});




// 表格数据源
let tableRuleData = ref([]);

// 获取表格数据
let gettableRuleDataData = async (data) => {
  let res = await GetDepartmentFiles(data);

  tableRuleData.value = res;
};




let tableDataPro = ref([]);


// 获取项目下拉框数据
let getOptions = async (data) => {
  let option_Team = await getOptionTeam(data);
  let option_Leader = await getOptionLeader(data);
  userOptionsleader.value = option_Leader;
  optionsNewteam_leader.value = option_Team;
};

let delArrRule = ref([]);
// 多选内容
let handleSelectionChangeRule = (val) => {
  delArrRule.value = val.map((item) => {
    return item.Id;
  });
};



let previewRule = async (row) => {

  let res = await DownloadDepartmentFile({ remote_url: row.remote_url });

  let filename = res.headers; //下载后文件名
  let filename2 = ""; //下载后文件名
  filename = filename["content-disposition"];
  filename = window.decodeURI(filename);
  filename2 = filename.split(";")[1].split("filename*=UTF-8''")[1];
  filename = filename.split(";")[1].split("filename=")[1];
  const link = document.createElement("a"); // 创建a标签
  const blo = new Blob([res.data], { type: res.data.type }); // 设置下载格式
  link.style.display = "none";
  const url = window.URL.createObjectURL(blo);
  console.log(url)
  link.href = url;
  if (filename == undefined) {
    filename = filename2;
  }
  link.download = filename;


  document.body.appendChild(link);
  link.click(); // 触发下载
  window.URL.revokeObjectURL(url); // 释放掉blob对象
  document.body.removeChild(link);
  ElMessage({
    message: "成功生成文件",
    type: "success",
  })
};

let delAllRules = async () => {
  if (delArrRule.value.length == 0) {
    ElMessage({
      message: "请选择文件",
      type: "error",
    });
    return false;
  }
  delArrRule.value.forEach(async (v, i) => {
    await DeleteDepartmentFile({ id: v });
    if (i == delArrRule.value.length - 1) {
      ElMessage({
        message: "删除成功",
        type: "success",
      });
      gettableRuleDataData({ file_type: "部室文件" });
    }
  });
};

let confirmDeleteRule = async (index, row) => {
  await DeleteDepartmentFile({ ...row });
  ElMessage({
    message: "删除成功",
    type: "success",
  });
  gettableRuleDataData();
};
let uploadRequest = async (uploadFile) => {
  let formData = new FormData();
  //传给后台接收的名字 file
  formData.append("file", uploadFile.file);
  await UploadDepartmentFiles(formData, "部室文件");
  ElMessage({
    message: "上传成功",
    type: "success",
  });
  gettableRuleDataData();
};

let uploadRequest2 = async (uploadFile) => {
  let formData = new FormData();
  //传给后台接收的名字 file
  formData.append("file", uploadFile.file);
  await UploadDepartmentFiles(formData, "技术资料");
  ElMessage({
    message: "上传成功",
    type: "success",
  });
  gettableRuleDataData();
};

let uploadRequest3 = async (uploadFile) => {
  let formData = new FormData();
  //传给后台接收的名字 file
  formData.append("file", uploadFile.file);
  await UploadDepartmentFiles(formData, "党建资料");
  ElMessage({
    message: "上传成功",
    type: "success",
  });
  gettableRuleDataData();
};

let uploadRequest4 = async (uploadFile) => {
  let formData = new FormData();
  //传给后台接收的名字 file
  formData.append("file", uploadFile.file);
  await UploadDepartmentFiles(formData, "海外资料");
  ElMessage({
    message: "上传成功",
    type: "success",
  });
  gettableRuleDataData();
};

let uploadRequest5 = async (uploadFile) => {
  let formData = new FormData();
  //传给后台接收的名字 file
  formData.append("file", uploadFile.file);
  await UploadDepartmentFiles(formData, "安全设计管理");
  ElMessage({
    message: "上传成功",
    type: "success",
  });
  gettableRuleDataData();
};

let dataSData = ref([]);

let activeHeight = ref(0);



let getMarjorProData = async (data) => {
  let res = await GetUnits(data);
  if (res) {
    dataSData.value = res;
  } else {
    dataSData.value = [];
  }
};

let proData = ref({});

let getNoticeDataTabel = ref([]);
let getNotice = async (data) => {
  let res = await GetAllProjectNotices(data);
  getNoticeDataTabel.value = res;
};

let userOptionsleader = ref([]);
let optionsNewteam_leader = ref([]);

let convertFileSize =(sizeInBytes) => {
  
  if (sizeInBytes >= 100000) {
      // 如果文件大小大于或等于100KB，则转换为MB
      return (sizeInBytes / (1024 * 1024)).toFixed(2) + ' MB';
  } else {
      // 如果文件大小小于100KB，则保留为KB
      return (sizeInBytes / 1024).toFixed(2) + ' KB';
  }
}

// 页面加载时
onMounted(() => {
  gettableRuleDataData();
  activeHeight.value =
    document.querySelector(".system-role-padding").clientHeight - 100;
  window.addEventListener("resize", () => {
    activeHeight.value =
      document.querySelector(".system-role-padding").clientHeight - 100;
  });
});
</script>
  
  <style scoped lang="scss">
.m-header {
  display: flex;
  align-items: center;
}
.m-header .pro-name {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.m-header .el-input {
  width: 300px;
}
.m-header .el-button {
  margin-right: 10px;
}

.system-role-container {
  .system-role-padding {
    padding: 15px;
    .el-table {
      flex: 1;
    }
  }
}
.button_footer {
  display: flex;
  flex-direction: row-reverse;
  width: 100%;
}
.table_content {
  margin-top: 20px;
}

::v-deep(.el-table--large .el-table__cell) {
  padding: 6px 0;
}

.table_box {
  padding: 20px 50px;
}

.button_poastion_flex_iem {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}

.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
  height: 100%;
}


::v-deep(.el-tabs__item::after) {
  position: absolute;
  content: " ";
  top: 0;
  width: 2px;
  height: 100%;
  background: #eee;
  right: 0;
}
</style>
  